<template>
  <!-- 页面容器 -->
  <view class="page-container">
    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 原始图片展示区 -->
      <view class="image-container">
        <view class="image-wrapper">
          <!-- 原始图片 -->
          <img src="https://picsum.photos/800/500" alt="检测区域" class="original-img" />
        </view>
        <text class="image-caption">原始图像</text>
      </view>

      <!-- 控制面板（包含按钮和设置项） -->
      <view class="control-panel">
        <!-- 按钮组 -->
        <view class="button-group">
          <!-- 重拍按钮 -->
          <button class="btn rephoto-btn" @click="rephoto">
            <uni-icon type="camera" size="18" />
            <text>重拍</text>
          </button>
          <!-- 开始检测按钮 -->
          <button class="btn detect-btn" @click="startDetection">
            <uni-icon type="search" size="18" />
            <text>开始检测</text>
          </button>
        </view>

        <!-- 参数设置组 -->
        <view class="settings-group">
          <!-- 置信度设置项 -->
		  
          <view class="setting-item">
            <text class="label">模型置信度:</text>
            <view class="slider-container">
              <!-- 置信度滑块（1-10整数值） -->
              <slider 
                class="custom-slider" 
                :max="1" 
                :min="0.1" 
                :step="0.1" 
				show-value
              />
            </view>
          </view>

          <!-- 材料类别选择项 -->
          <view class="setting-item" >
            <text class="label">材料类别:</text>
            <!-- 材料下拉选择器 -->
			<uni-data-select
			v-model="material"
			:localdata="materialOptions"
			:auto-query="false"
			placeholder="请选择材料"
			
			>
				
			</uni-data-select>
          </view>

          <!-- 切块参数设置项 -->
           <view class="cut-block-container">
              <view class="cut-item">
                <text class="label">切块数 (X方向):</text>
                <input class="input-box" type="number" :value="blockX" />
              </view>
              <view class="cut-item">
                <text class="label">切块数 (Y方向):</text>
                <input class="input-box" type="number" :value="blockY" />
              </view>
            </view>
        </view>
      </view>

      <!-- 检测结果面板（仅在showResult为true时显示） -->
      <view class="result-panel" v-if="showResult">
        
        <!-- 结果内容区 -->
        <view class="result-content">
          
          <!-- 结果详情区 -->
          <view class="result-details">
            <!-- 缺陷列表区域 -->
            <view class="detail-section">
              <text class="section-title">缺陷列表</text>
              <!-- 可滚动缺陷列表容器 -->
              <view class="result-list-container" ref="listRef">
                <view class="result-list">
                  <!-- 遍历显示每个缺陷项 -->
                  <view v-for="(item, idx) in resultData" :key="idx" class="result-item">
                    <uni-icon type="warn" size="14" class="defect-icon" />
                    <text>{{ item }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 结果操作按钮 -->
        <view class="result-actions">
          <!-- 保存结果按钮 -->
          <button class="btn save-btn" @click="saveResult">
            <uni-icon type="download" size="16" />
            <text>保存结果</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed, onMounted, getCurrentInstance  } from 'vue';

//接受相机或者值，重拍时使用
const REPEAT_SELECTION = ref('')
onMounted(() => {
  // 获取当前页面实例（页面栈的最后一个元素）
  const pages = getCurrentPages();
  if (pages.length === 0) return; // 安全校验
  const currentPage = pages[pages.length - 1];
  
  // 从页面实例的 options 中获取参数（uniapp 页面参数存储在此处）
  const sourceType = currentPage.options.sourceType || ''; // 设默认值防止 undefined
  
  REPEAT_SELECTION.value = sourceType; // 赋值给 ref
  console.log('接收到的 sourceType:', REPEAT_SELECTION.value);
});
// 置信度整数值（1-10，对应0.1-1.0）
const confidenceInt = ref(0.1); // 初始值7对应0.7
// 材料相关数据
const material = ref('石材'); // 当前选择的材料
const materialOptions = ref([
  { text: '石材', value: '石材' },
  { text: '混凝土', value: '混凝土' },
  { text: '砖块', value: '砖块' },
  { text: '木材', value: '木材' },
  { text: '金属', value: '金属' }
]); // 可选材料列表 // 可选材料列表

// 切块参数
const blockX = ref(3); // X方向切块数
const blockY = ref(3); // Y方向切块数

// 结果展示控制
const showResult = ref(false); // 是否显示结果面板

// 模拟检测结果数据
const resultData = ref([
  'wall-defect-1: 面积0.0324m²',
  'wall-crack-2: 裂缝长0.85mm, 宽0.2mm',
  'wall-defect-3: 面积0.0156m²',
  'wall-crack-4: 裂缝长1.24mm, 宽0.3mm',
  'wall-defect-5: 面积0.0089m²',
  'wall-crack-6: 裂缝长1.54mm, 宽0.4mm',
  'wall-defect-7: 面积0.0213m²',
]);

// 重拍功能(唤起相机或者相册)
const rephoto = () => {
  console.log('重拍功能模拟');
  handleImageSelection(REPEAT_SELECTION.value);
  showResult.value = false; // 隐藏结果面板
  
};
function handleImageSelection(sourceType){
		uni.chooseImage({
			count:1,
			sourceType:[sourceType],
			success:(res)=>{
				imagePath.value = res.tempFilePaths[0];
				uni.navigateTo({
					url:"/pages/Testing/Testing"
				})
			},
			fail:(err)=>{
				uni.showToast({
					title:sourceType === 'camera'? '拍照失败':'选择图片失败',
					icon:'none'
				});
			}
		})
	}
// 开始检测功能
const startDetection = async () => {
  showResult.value = true; 
};



// 保存结果功能
const saveResult = () => {
  console.log('保存结果功能模拟');
  // 显示加载中状态
  uni.showLoading({
    title: '保存中...'
  });
  // 模拟保存完成后隐藏加载状态
  setTimeout(() => {
    uni.hideLoading();
  }, 1000);
};

// 动态设置滚动容器高度（挂载后执行）
const listRef = ref(null);
onMounted(() => {
  if (listRef.value) {
    const containerHeight = window.innerHeight * 0.3;
    listRef.value.style.height = `${containerHeight}px`;
  }
});
</script>

<style lang="scss" scoped>
@import "@/common/css/Testing.scss";
</style>